<template>
    <div class="box">
      <!-- 省份地图 -->

      <el-card>
        <div id="main"></div>
      </el-card>
      <router-view></router-view>
    </div>
  </template>
<script setup>
 import {onMounted} from "vue";
 import {useRoute} from 'vue-router'
  //引入地图相关数据
import echarts from 'echarts'
import '../../../src/utils/allmap'//引入所有省份
import {City} from '@/api/api'
onMounted(()=>{
    let cityname=useRoute().params.cityname
    console.log(useRoute().params.cityname)
    City().then((res)=>{
        console.log('获取的城市地图数据',res.data.data)
        let  data=res.data.data
        // 1.通过 echarts.init 方法初始化一个 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        // 2.指定图表的配置项和数据
        var option = {
            title:{//标题组件，包含主标题和副标题。
                text:cityname+'----就业分布'
                },
            tooltip: {//悬浮弹框
                triggerOn: 'click', //提示框触发的条件
                enterable: true,//鼠标是否可进入提示框浮层中，默认为false
                //1.函数回调
                formatter(data) {//[{} ] data={}
                 return '<a href="#/city/'+cityname+'/'+data.name+'" style="color:#fff">城市：'+data.name+'，就业人数：'+(data.value?data.value:0)+'</a>'
                },
                //2.字符串格式
                // formatter:'{a}-{b},就业人数:{c}'
            },
            visualMap: [{//视觉映射组件
                orient: "vertical",//如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
                type: "piecewise",//分段型视觉映射组件 type: "continuous" 连续型视觉映射组件
                bottom:0,//visualMap 组件离容器下侧的距离。
                pieces: [ // 配置颜色区间
                    {
                        min: 0,
                        max: 0,
                        color: "#FFFFFF"
                    },
                    {
                        min: 1,
                        max: 2,
                        color: "#FDFDCF"
                    },
                    {
                        min: 3,
                        max: 4,
                        color: "#FE9E83"
                    },
                    {
                        min: 5,
                        max: 6,
                        color: "#E55A4E"
                    },
                    {
                        min: 6,
                        max: 11,
                        color: '#CD5C5C'
                    }
                ]
            }],
            series: [{
                // name:"天津"
                name: cityname,
                type: "map",//地图
                // map:'天津',
                map: cityname,//省份地图 需要导入省份
                roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。
                zoom: 1.2,//当前视角的缩放比例。
                aspectScale:0.75,//地图的长宽比，如果设置了projection则无效。
                top:40,////组件离容器上侧的距离。
                layoutCenter:['5%', '5%'],//定义地图中心在屏幕中的位置
                label: {//图形上的文本标签
                    normal: {
                        show: true,//是否显示标签。
                        textStyle: {// 文本标签文字的样式
                            fontSize: 7//文字的字体大小
                        }
                    }
                },
                itemStyle: {//地图区域的多边形 图形样式。
                    normal: {
                        areaColor: 'rgba(0,255,236,0)',
                        borderColor: 'rgba(0,0,0,0.2)',
                    },
                    emphasis: { // 选中的区域颜色及阴影效果等
                        areaColor: 'pink',//地图区域的颜色。
                        shadowOffsetX: 0,//阴影水平方向上的偏移距离。
                        shadowOffsetY: 0,//阴影垂直方向上的偏移距离。
                        shadowBlur: 20,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        borderWidth: 0,//描边线宽。为 0 时无描边。
                    }
                },
                data
                // data:[//地图系列中的数据内容数组
                //   //name--数据所对应的地图区域的名称，例如 '北辰区'，'西青区'。
                //    //value--该区域的数据值。
                //     {name:'北辰区',value:5},
                //     {name:'西青区',value:32},
                //     {name:'武清区',value:4},
                //     {name:'蓟州区',value:6},
                //     {name:'宝坻区',value:7},
                //     {name:'宁河区',value:1},
                //     {name:'红桥区',value:6},
                //     {name:'河北区',value:12},
                //     {name:'南开区',value:10},
                //     {name:'津南区',value:15},
                //     {name:'滨海新区',value:20},
                //     {name:'静海区',value:5},
                //     {name:'东丽区',value:6},
                //     {name:'和平区',value:22},
                //     {name:'河西区',value:5},
                //     {name:'河东区',value:8}

                // ]
            }]
        }
         // 3.使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        })
    
   
})
  

  </script>
  
  <style lang="less" scoped>
  .box{
    width:100%;
    display: flex;
    flex-direction: row;
    .el-card{
      width:100%;
      height:560px;
        #main{
          width:100%;
          height:540px;
        }
    }
  }
  
  </style>